<template>
	<page>
	<!-- <uni-list>
		<uni-list-item title="名称" :show-arrow="false" />
		<uni-list-item title="列表左侧带略缩图" thumb="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png" />
		<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" title="列表左侧带扩展图标" />
		
	</uni-list> -->
	<view class="content">
	         <view class="uni-list">
	             <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in list" :key="index">
	                  <view class="uni-list-cell-navigate ">
	                       <view>{{item.title}}</view>
						   <view class='uni-navigate-right'>{{item.content}}</view>
	                  </view>
	             </view>
				 
				 <view class="uni-list-cell" hover-class="uni-list-cell-hover">
					  <view class="uni-list-cell-navigate ">选择支付方式 </view>
				  </view>
				  
				   <view class="uni-list-cell" hover-class="uni-list-cell-hover">
					  <view class="uni-list-cell-navigate ">
						  <view class='wx-left'>
							  <!-- <view><image src="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png"></image></view> -->
							  <view><image src="/static/wx-play/alipay.jpg"></image></view>
							  <view><text>微信支付</text></view>
						  </view>
						  <view class='uni-navigate-right'>
							  <view class="uni-list-item__extra">
							  	<radio :value="button" :checked='true' class='radio' />
							  </view>
						  </view>
					   </view>
				    </view>
				   
	         </view>
			 
			 <view class="create_btn">
			 	<button type="primary" @tap="applyGroup">确认支付</button>
			 </view>
	    </view>
		
	</page>
</template>
<style>
	.create_btn {
		width:90%;
		margin:50upx auto 0upx;
	}
	.create_btn button {
		margin: 0 auto;
		width: calc(100% - 20px);
	}
	.uni-list-cell text{
		text-align:left;
	}
	.wx-left{
		align-items: center;
		width: 300upx;
		display: flex;
	}
	.wx-left image{
		width:100upx;
		height:100upx;
	}
</style>
<script>
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	export default {
		components: {
			uniList,
			uniListItem
		},
		data() {
			return {
				list:[
					{
						title:'名称',
						content:'群管理费'
					},
					{
						title:'金额',
						content:'88元'
					},
					{
						title:'实付金额',
						content:'88元'
					},
					
				],
				extraIcon1: {
					color: '#007aff',
					size: '22',
					type: 'gear-filled'
				},
				extraIcon2: {
					color: '#4cd964',
					size: '22',
					type: 'image'
				},
				/*重复上个页面的参数*/
				addFriendName: [],		
				roomId: "",				// 群id
				nameList:[],
			}
		},
		onLoad(options) {
			let addOptions=options.addOptions;
			let nameListOptions=options.nameListOptions;
			console.log('addOptions的值',JSON.parse(addOptions));
			console.log('nameList的值',JSON.parse(nameListOptions));
			this.roomId=JSON.parse(addOptions)['roomId'];
			this.addFriendName=JSON.parse(addOptions)['list'];
			this.nameList=JSON.parse(nameListOptions);
		},
		methods: {
			/*确认支付*/
			applyGroup(){
				var firendArr = [],me=this,nameList;
				firendArr.push(this.addFriendName);
				nameList = {
					myName: uni.getStorageSync("myUsername"),
					your: this.addFriendName,
					groupId: this.roomId
				};
				let option={
					list: firendArr,
					roomId: me.roomId,
					success:function(){
						uni.showToast({
							title: "加入成功",
							duration: 2000,
						});
						uni.navigateTo({
							url: "../../groupChatRoom/groupChatRoom?username="+JSON.stringify(nameList)
						});
					},
					error:function(){
						uni.showToast({
							title: err.data.error_description,
						});
					}
				}
				this.$im.conn.addGroupMembers(option);
			},
			switchChange(e) {
				uni.showToast({
					title: 'change:' + e.value,
					icon: 'none'
				})
			}
		}
	}
</script>

<style>
	@import "../../../common/uni.css";
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4
	}
	
	view {
		font-size: 28upx;
		line-height: inherit
	}
	
	.example {
		padding: 0 30upx 30upx
	}
	
	.example-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32upx;
		color: #464e52;
		padding: 30upx 30upx 30upx 50upx;
		margin-top: 20upx;
		position: relative;
		background-color: #fdfdfd;
		border-bottom: 1px #f5f5f5 solid
	}
	
	.example-title__after {
		position: relative;
		color: #031e3c
	}
	
	.example-title:after {
		content: '';
		position: absolute;
		left: 30upx;
		margin: auto;
		top: 0;
		bottom: 0;
		width: 6upx;
		height: 32upx;
		background-color: #ccc
	}
	
	.example .example-title {
		margin: 40upx 0
	}
	
	.example-body {
		padding: 30upx;
		background: #fff
	}
	
	.example-info {
		padding: 30upx;
		color: #3b4144;
		background: #fff
	}
</style>
